<template>
  <div class="list-detail">
    <div class="list-detail-wrap" ref="listDetailWrap">
      <div class="inner-wrap">
        <div class="list-detail-banner">
          <a href=""><img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/88852b76f3fc46f561f8f769ddd59d23.jpg?f=webp&w=750&h=300&bg=FFFFFF" alt=""></a>
        </div>
        <div class="list-detail-item">
          <div class="title">
            <span>小米数字系列</span>
          </div>
          <div class="list-item-product">
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <!-- 循环删除开始 -->
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <!-- 循环删除结束 -->
          </div>
        </div>

        <div class="list-detail-banner">
          <a href=""><img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/88852b76f3fc46f561f8f769ddd59d23.jpg?f=webp&w=750&h=300&bg=FFFFFF" alt=""></a>
        </div>
        <div class="list-detail-item">
          <div class="title">
            <span>小米数字系列</span>
          </div>
          <div class="list-item-product">
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <!-- 循环删除开始 -->
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <div class="product">
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/58a4446432aba7894e957f2c18853562.png?thumb=1&w=120&h=120" alt="">
              <span>小米青春</span>
            </div>
            <!-- 循环删除结束 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
  mounted () {
    /* eslint-disable no-new */
    new Bscroll(this.$refs.listDetailWrap, {
      mouseWheel: true,
      bounce: false
    })
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.list-detail {
  width: px2rem(600 / 2);
  position: relative;
  z-index: 1;
  .list-detail-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    .inner-wrap {
      padding-bottom: px2rem(200 / 2)
    }
  }
  .list-detail-banner {
    width: px2rem(500 / 2);
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  .list-detail-item {
    width: px2rem(500 / 2);
    margin: 0 auto;
    margin-top: px2rem(20 / 2);
    .title {
      text-align: center;
      span {
        position: relative;
        z-index: 1;
        color: #3c3c3c;
        font-size: px2rem(28 / 2);
        &:before {
          border-top: 1px solid #e0e0e0;
          width: .4rem;
          position: absolute;
          left: -.6rem;
          top: 50%;
          content: "";
        }
        &:after {
          border-top: 1px solid #e0e0e0;
          width: .4rem;
          position: absolute;
          right: -.6rem;
          top: 50%;
          content: "";
        }
      }
    }
    .list-item-product {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .product {
        width: 30%;
        text-align: center;
        margin: .2rem 0 .3rem;
        img {
          display: block;
          width: 100%;
        }
        span {
          display: block;
          color: rgba(0,0,0,.54);
          font-size: px2rem(28 / 2);
          margin-top: px2rem(28 / 2);
        }
      }
    }
  }
}
</style>
